﻿<template>
  <div>
    <el-form label-position = 'top'>
      <el-form-item v-if = "currentPage" label = '该页面是否配置流程图：'>
        <el-switch size = 'mini' v-model = 'currentPage.hadWorkflow'></el-switch>
      </el-form-item>
      <!-- 关联的流程 -->
      <el-form-item v-if = "currentPage && currentPage.hadWorkflow" label = '流程名称：'>
        <el-select v-model = 'currentPage.relatedWorkflow' @change = 'workflowChange' placeholder = '请选择' clearable filterable @focus = 'getAllWorkflow'>
          <el-option-group v-for = '(value, name) in allWorkflow' :key = 'name' :label = "name === 'Cur' ? '当前版本' : '历史版本'">
            <el-option v-for = 'item in value' :key = 'item.WFID' :label = "name === 'Cur' ? (item.Title + ' v' + item.Version) : (item.Title + '(历史)' + ' v' + item.Version)" :value = 'item.WFID'></el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <!-- 关联的流程的节点 -->
      <el-form-item v-if = "currentPage && currentPage.hadWorkflow" label = '流程节点：'>
        <el-select v-model = 'currentPage.relatedWorkflowNode' placeholder = '请选择' clearable filterable @focus = 'getCurrentWorkflowNode'>
          <el-option v-for = 'item in allWorkflowNode' :key = 'item.NodeID' :label = 'item.Title' :value = 'item.NodeID'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if = "currentPage && currentPage.hadWorkflow" label = '流程事件：'>
        <template>
          <div class = "addColumn">
            <p @click = "handleAddOption"> <i class = "iconfont icon-add"></i>添加流程事件</p>
          </div>
          <el-table :data = 'currentPage.workflowBtnEvents' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'btnType' label = '操作类型' :render-header = 'handelHelp' label-class-name = "同种操作类型代表同一个按钮，一个按钮可以绑定多个事件，按照执行顺序进行执行">
              <template slot-scope = "scope">
                <el-select v-model = "scope.row.btnType" placeholder = '请选择' clearable filterable>
                  <el-option label = '保存(新增)' value = 'Save_add'></el-option>
                  <el-option label = '保存(修改)' value = 'Save_edit'></el-option>
                  <el-option label = '删除' value = 'Delete'></el-option>
                  <el-option label = '提交' value = 'Submit'></el-option>
                  <el-option label = '通过' value = 'Pass'></el-option>
                  <el-option label = '驳回' value = 'Reject'></el-option>
                  <el-option label = '选择驳回' value = 'SelectReject'></el-option>
                  <el-option label = '终止' value = 'Stop'></el-option>
                  <el-option label = '申请' value = 'Apply'></el-option>
                  <el-option label = '提交挂起' value = 'SubmitPending'></el-option>
                  <el-option label = '恢复挂起' value = 'ActivePending'></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'actionIndex' label = '执行顺序' :render-header = 'handelHelp' label-class-name = "可以设置事件的执行顺序，同一按钮事件由小到大的循序执行，0为流程的固定事件无需设置">
              <template slot-scope = "scope">
                <el-input-number size = "mini" v-model = "scope.row.actionIndex" :min = "-10" :max = "10" :step = "1" step-strictly
                @change = "(val, oldVal)=>{actionIndexChange(val, oldVal, scope.$index)}"></el-input-number>
              </template>
            </el-table-column>
            <!-- 当为元数据页面的流程设置时，需要判断其是否是固有的事件 -->
            <el-table-column align = "center" prop = 'workflowEventType' label = '事件类别' show-overflow-tooltip v-if = "from === 'metaPage'"
            :render-header = 'handelHelp' label-class-name = '除自定义事件外，其它类别的事件均为元数据内部事件，该类事件(移除节点除外)均需要设置相关的参数'>
              <template slot-scope = "scope">
                <el-select v-model = "scope.row.workflowEventType" clearable filterable @change = "() => {workflowEventTypeChange(scope.$index)}">
                  <el-option label = '更新节点' value = 'updateNode'></el-option>
                  <el-option label = '创建下一节点' value = 'addNode'></el-option>
                  <el-option label = '移除节点' value = 'deleteNode'></el-option>
                  <el-option label = '固有事件' value = 'inherent'></el-option>
                  <el-option label = '自定义事件' value = 'selfdefine'></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = '事件参数' width = "80px" v-if = "from === 'metaPage'"
            :render-header = 'handelHelp' label-class-name = '只有非自定义事件，才需要设置事件参数'>
              <template slot-scope = "scope">
                <span @click = 'settingFixedFilter(scope.$index)' class = 'clickStatus' v-if = "scope.row.workflowEventType && scope.row.workflowEventType !== 'deleteNode' && scope.row.workflowEventType !== 'selfdefine'">点击设置</span>
                <span v-else></span>
              </template>
            </el-table-column>
            <!-- 自定义事件时，需要设置 -->
            <el-table-column align = "center" prop = 'eventsNo' label = '事件名称' show-overflow-tooltip
            :render-header = 'handelHelp' label-class-name = '只有自定义事件，需要选择事件名称'>
              <template slot-scope = "scope">
                <el-select v-model = "scope.row.eventsNo" placeholder = '请选择' clearable filterable :disabled = "scope.row.workflowEventType !== 'selfdefine'">
                  <el-option v-for = '(eventItem, eventIndex) in allEvents' :key = 'eventIndex' :label = 'eventItem.name' :value = 'eventItem.no'></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = '词典表' width = "80px" :render-header = 'handelHelp' label-class-name = '只有自定义的事件才需要设置词典表'>
              <template slot-scope = "scope">
                <span @click = 'setEventDic(scope.row, scope.$index)' class = 'clickStatus' v-if = "scope.row.workflowEventType === 'selfdefine'">点击设置</span>
                <span v-else></span>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'btnName' label = '按钮名称' :render-header = 'handelHelp' label-class-name = '可以根据自己的需要设置按钮名称'>
              <template slot-scope = "scope">
                <el-input v-model = 'scope.row.btnName' clearable placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "30">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleOptionsRemove('workflowBtnEvents', scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form-item>
    </el-form>
    <!-- 自定义事件设置词典表 -->
    <Event-Dic :row = 'clickRow' :eventDicDialog = 'eventDicDialog' @sureSeetingEventDic = 'sureSeetingEventDic' @giveUp = 'eventDicDialog = false'></Event-Dic>
    <!-- 设置流程类事件的参数 -->
    <Set-Event-Params :nodeJsonInfo = 'nodeJsonInfo' :nodeJsonDialog = 'nodeJsonDialog'
    @setNodeJsonSuccess = 'setNodeJsonSuccess' @setNodeJsonfailed = 'nodeJsonDialog = false'></Set-Event-Params>
    <!-- 元数据流程页面固定事件设置事件表达式 -->
    <Fixed-Filter-Express :fixedFilterRow = 'fixedFilterRow' :fixedFilterDialog = 'fixedFilterDialog'
    @settingFixedFilterSuccess = 'settingFixedFilterSuccess' @settingFixedFilterFailed = 'fixedFilterDialog = false'></Fixed-Filter-Express>
  </div>
</template>

<script>
// 设置事件词典表
import EventDic from '@/components/Events/EventsDic.vue'
// 设置流程类事件参数
import SetEventParams from '@/components/Events/WorkflowEventParams.vue'
// 元数据流程页面设置固定事件表达式
import FixedFilterExpress from '@/components/MetaFormComponents/Fixed_filter_express.vue'
export default {
  // from表示两种来源，一个是动态页面中流程的设置(dynamicPage)，一个是元数据页面中流程的设置(metaPage)
  props: ['currentPage', 'showEditContentDialog', 'from'],
  components: { EventDic, FixedFilterExpress, SetEventParams },
  data () {
    return {
      allEvents: [],
      allWorkflow: [],
      allWorkflowNode: [],
      // 打开设置页面词典表的弹窗
      eventDicDialog: false,
      clickRow: null,
      clickIndex: null,
      // 打开设置事件表达式的弹窗--元数据流程页面时
      fixedFilterRow: {
        eventsType: 'extend_workflow',
        dataExpress: '',
        filterExpress: ''
      },
      fixedFilterDialog: false,
      // 打开设置事件参数的页面
      nodeJsonDialog: false,
      nodeJsonInfo: {
        nodeJson: '',
        workflowEventType: ''
      }
    }
  },
  created () {
    this.getAllEvents()
    if (this.currentPage && !this.$isEmptyObject(this.currentPage)) {
      this.getAllWorkflow()
      if (this.currentPage.relatedWorkflow) {
        this.getCurrentWorkflowNode()
      }
    }
  },
  methods: {
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect="dark" placement="top">
            <div slot='content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 获取所有的页面事件
    getAllEvents () {
      this.$get('/events4dform/alllist').then(data => {
        if (data.data.result.code === 'success') {
          this.allEvents = data.data.result.data
        } else if (data.data.result.code === 'failed') {
          this.$message({
            message: data.data.result.msg,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取所有的流程
    getAllWorkflow () {
      this.allWorkflow = []
      this.$workflowPost('/WorkFlowEngine/AppWorkFlowListAll').then((data) => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.allWorkflow = dataResult.data
        } else if (data.data.result.code === 'failed') {
          this.$message({
            message: data.data.result.msg,
            type: 'error'
          })
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取指定的流程节点
    getCurrentWorkflowNode () {
      if (this.currentPage.relatedWorkflow) {
        this.allWorkflowNode = []
        this.$workflowPost('/WorkFlowEngine/AppWorkFlowNodes', {
          WFID: this.currentPage.relatedWorkflow
        }).then((data) => {
          let dataResult = data.data.result
          if (dataResult.code === 'success') {
            this.allWorkflowNode = dataResult.data
          } else if (data.data.result.code === 'failed') {
            this.$message({
              message: data.data.result.msg,
              type: 'error'
            })
          }
        }).catch((error) => {
          console.log(error)
        })
      } else {
        this.$message({
          message: '请先选择关联的流程',
          type: 'warning'
        })
      }
    },
    // 删除选项时
    handleOptionsRemove (tableName, index) {
      if (tableName === 'workflowBtnEvents') {
        this.currentPage[tableName].splice(index, 1)
      }
    },
    // 新增选项时
    handleAddOption (tableName) {
      if (this.from === 'dynamicPage') {
        this.currentPage.workflowBtnEvents.push({
          eventsNo: '',
          actionIndex: -2,
          btnType: '',
          btnName: '',
          inputDic: [],
          outputDic: []
        })
      } else if (this.from === 'metaPage') {
        this.currentPage.workflowBtnEvents.push({
          // 事件类别
          workflowEventType: '',
          // 固有事件的表达式
          filterExpress: '',
          dataExpress: '',
          // 节点事件的参数设置
          nodeJson: '',
          eventsNo: '',
          actionIndex: -2,
          btnType: '',
          btnName: '',
          inputDic: [],
          outputDic: []
        })
      }
    },
    // 事件执行的顺序改变时
    actionIndexChange (val, oldVal, index) {
      if (val === 0) {
        if (val > oldVal) {
          this.currentPage.workflowBtnEvents[index].actionIndex = val + 1
        } else {
          this.currentPage.workflowBtnEvents[index].actionIndex = val - 1
        }
      }
    },
    // 设置词典表时
    setEventDic (row, index) {
      if (row.eventsNo) {
        this.eventDicDialog = true
        this.clickRow = JSON.parse(JSON.stringify(row))
        this.clickIndex = index
      } else {
        this.$message({
          message: '请添加需要的事件',
          type: 'warning'
        })
      }
    },
    // 设置词典表成功时
    sureSeetingEventDic (fromSetting) {
      this.eventDicDialog = false
      this.currentPage.workflowBtnEvents[this.clickIndex].inputDic = fromSetting.inputDic
      this.currentPage.workflowBtnEvents[this.clickIndex].outputDic = fromSetting.outputDic
    },
    // 选择的流程改变时
    workflowChange (val) {
      if (val && this.allWorkflow) {
        let hadEval = false
        if (this.allWorkflow.Cur && this.allWorkflow.Cur.length) {
          for (let i = 0; i < this.allWorkflow.Cur.length; i++) {
            if (val === this.allWorkflow.Cur[i].WFID) {
              let name = this.allWorkflow.Cur[i].Title + ' v' + this.allWorkflow.Cur[i].Version
              hadEval = true
              this.$set(this.currentPage, 'relatedWorkflowName', name)
              break
            }
          }
        }
        if (!hadEval && this.allWorkflow.Old && this.allWorkflow.Old.length) {
          for (let i = 0; i < this.allWorkflow.Old.length; i++) {
            if (val === this.allWorkflow.Old[i].WFID) {
              let name = this.allWorkflow.Old[i].Title + '(历史)' + ' v' + this.allWorkflow.Old[i].Version
              this.$set(this.currentPage, 'relatedWorkflowName', name)
              break
            }
          }
        }
      }
    },
    // 选择事件类别改变时
    workflowEventTypeChange (index) {
      if (this.currentPage.workflowBtnEvents[index].workflowEventType) {
        if (this.currentPage.workflowBtnEvents[index].workflowEventType === 'selfdefine') {
          // 自定义事件不需要设置参数
          this.currentPage.workflowBtnEvents[index].filterExpress = ''
          this.currentPage.workflowBtnEvents[index].dataExpress = ''
          this.currentPage.workflowBtnEvents[index].nodeJson = ''
        } else if (this.currentPage.workflowBtnEvents[index].workflowEventType === 'inherent') {
          this.currentPage.workflowBtnEvents[index].eventsNo = ''
          this.currentPage.workflowBtnEvents[index].inputDic = []
          this.currentPage.workflowBtnEvents[index].outputDic = []
          this.currentPage.workflowBtnEvents[index].nodeJson = ''
        } else {
          this.currentPage.workflowBtnEvents[index].eventsNo = ''
          this.currentPage.workflowBtnEvents[index].inputDic = []
          this.currentPage.workflowBtnEvents[index].outputDic = []
          this.currentPage.workflowBtnEvents[index].filterExpress = ''
          this.currentPage.workflowBtnEvents[index].dataExpress = ''
        }
      } else {
        this.currentPage.workflowBtnEvents[index].eventsNo = ''
        this.currentPage.workflowBtnEvents[index].inputDic = []
        this.currentPage.workflowBtnEvents[index].outputDic = []
        this.currentPage.workflowBtnEvents[index].filterExpress = ''
        this.currentPage.workflowBtnEvents[index].dataExpress = ''
        this.currentPage.workflowBtnEvents[index].nodeJson = ''
      }
    },
    // 设置参数时
    settingFixedFilter (index) {
      this.clickIndex = index
      if (this.currentPage.workflowBtnEvents[index].workflowEventType === 'inherent') {
        // 当为固有事件时
        this.fixedFilterRow.dataExpress = this.currentPage.workflowBtnEvents[index].dataExpress
        this.fixedFilterRow.filterExpress = this.currentPage.workflowBtnEvents[index].filterExpress
        this.fixedFilterDialog = true
      } else {
        // 流程类事件时
        this.nodeJsonInfo.nodeJson = this.currentPage.workflowBtnEvents[index].nodeJson
        this.nodeJsonInfo.workflowEventType = this.currentPage.workflowBtnEvents[index].workflowEventType
        this.nodeJsonDialog = true
      }
    },
    // 固定事件，设置表达式成功时
    settingFixedFilterSuccess (fromSetting) {
      this.currentPage.workflowBtnEvents[this.clickIndex].filterExpress = fromSetting.filterExpress
      this.currentPage.workflowBtnEvents[this.clickIndex].dataExpress = fromSetting.dataExpress
      this.fixedFilterDialog = false
    },
    // 流程类事件，设置参数表达式成功时
    setNodeJsonSuccess (fromSetting) {
      this.currentPage.workflowBtnEvents[this.clickIndex].nodeJson = fromSetting
      this.nodeJsonDialog = false
    }
  },
  watch: {
    showEditContentDialog: {
      handler (val) {
        if (val) {
          this.clickRow = null
          this.clickIndex = null
        }
      },
      deep: true
    }
  }
}
</script>
